<template>
      <div>
      <CategoryHeadVue them="登录页面"></CategoryHeadVue>
      <section>
      <div class="biaodan">
        <input class="username" placeholder="手机号/账户名/邮箱" v-model.trim="username" name="username">
        <input class="password" placeholder="请输入密码" v-model.trim="password"  :type = "inputtype">
        <van-icon :name="iconname" class="closeeye" @click="change"/>
        <!-- <van-icon name="eye-o" /> -->
      </div>
        <div class="submit" @click="regster()">登录</div>
        <p class="msg">{{msg}}</p>
        <p class="phone" @click = "zhuce">手机号注册</p>
      </section>
  </div>
</template>

<script>
import CategoryHeadVue from "@/components/Category-head.vue";
import axios from "axios"
import { Toast } from 'vant';
export default {
   name:"aeg-vue",
   data(){
    return {
        username:"13139384874",
        password:"Yjw102800",
        msg:"",
        iconname:"closed-eye",
        flag :true,
        inputtype : "password"
      
    }
   },
   methods:{
    regster(){
      console.log(111);
       //点击登录，发送请求判断用户名与密码是否注册
       if(this.username && this.password){
        axios({
          url:"/api/user/login",
          method:"post",
          data:{
            loginname:this.username,
            password:this.password
          }

        })
        .then(res=>{
          console.log(res.data.data);
          if(res.data.code == "10011"){
            Toast("登录失败，用户名或密码错误")
             return
          }else if(res.data.code == "10010"){
            Toast("亲，请先注册")
            return
          }else if(res.data.code == "200"){
            Toast("登录成功")
            //存储对应token和账户名
            localStorage.setItem("token",res.data.data.token)
            localStorage.setItem("userid",res.data.data.userid)
            localStorage.setItem("username",this.username)
            localStorage.setItem("loginState",true)
            setTimeout(() => {
              this.$router.push("/")
            }, 500);
          }
        })
       }else{
        Toast("请输入用户名或密码")
       }
    },
    zhuce(){
      this.$router.push("/zhuce/index")
    },
    change(){
    if(this.flag){
      this.iconname = "eye-o"
      this.inputtype = "text"
      this.flag = false
    }else{
      this.iconname = "closed-eye"
      this.inputtype = "password"
      this.flag = true
    }
      
    }
   },
   components:{
    CategoryHeadVue
   }

}
</script>

<style scoped>
.submit{
  width: 95%;
  height: 1.75rem;
  background-color:rgba(234, 115, 115, 0.999);
  text-align: center;
  margin: 0 auto;
  line-height: 1.75rem;

  color: white;
  border-radius:1rem;
  margin-top: 1rem;
}
.phone{
  float: right;
  font-size: .6rem;
  color: blue;
  margin-right: .5rem;
  margin-top: .5rem;
}
section{
  background-color: #fff;
  overflow: auto;
  height: 9.5rem;
}
.username,.password{
  display: block;
  width: 80%;
  margin: 0 auto;
  height: 2rem;
  border: none;
 border-bottom: 1px solid rgb(189, 187, 187);
 color:black;
}
.username{
  margin-top: 1rem;
}
.msg{
  float: left;
  font-size: .8rem;
}
.biaodan{
  position: relative;
}
.closeeye{
  position: absolute;
  top: 3rem;
  right: 2.5rem;
}
</style>